<template>
  <div class="wapper">
          <el-container style="100%">
      <el-main style="background:#fff;margin-left:10px">
        <div class="table-wrap">
          <div class="handle-box3">
            <el-form :inline="true" class="demo-form-inline">   
                <el-button type="primary" icon="el-icon-export" @click="exportExcel()">导出</el-button>&nbsp;&nbsp;&nbsp;
                 <el-form-item label="搜索：">
                  <el-input v-model="searchForm.name" placeholder="门禁点"></el-input>
                </el-form-item>
                 <el-form-item label="">
                  <el-input v-model="searchForm.phone" placeholder="类型"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker v-model="searchForm.startDate" type="datetime" placeholder="开始日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker v-model="searchForm.endDate" type="datetime" placeholder="开始日期"></el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
            </el-form>
          </div>
        <div class="tabbox">
          <el-table
            :data="dataList"
            height="100%"
            border
            class="tabbox"
            ref="multipleTable"
            :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="typeName" label="类型" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.typeName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="door" label="门禁点" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.door}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.time}}</span>
              </template>
            </el-table-column>
            <el-table-column label="通行总量"  align="center">
              <template slot-scope="scope">
                <span>{{scope.row.number}}</span>
              </template>
            </el-table-column>
            <el-table-column label="证件通行量"  align="center">
              <template slot-scope="scope">
                <span>{{scope.row.document}}</span>
              </template>
            </el-table-column>
            <el-table-column label="票通行量"  align="center">
              <template slot-scope="scope">
                <span>{{scope.row.ticket}}</span>
              </template>
            </el-table-column>
          </el-table></div>
    </div>
    </el-main>
    </el-container>
  </div>
</template>

<script>
import Blob from "../../../components/common/Blob";
import Export2Excel from "../../../components/common/Export2Excel";

export default {
  data() {
    return {
      //表格高度适配
      searchForm:{
        name:'',
        phone:'',
        endDate:new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),
        startDate:new Date(new Date(new Date().toLocaleDateString()).getTime()),
        projectId:localStorage.getItem('project_Id')
      },
      tabheight: "",
      dataList: [],
    };
  },
  mounted() {
    // this.tabheight=(this.$refs.getheight.offsetHeight-165)
  },
  created() {
    this.getData();
  },
  methods: {
    getData(){
      this.$axios.post('/AccessRecord/Search/',this.searchForm)
        .then(res =>{
          if (res.data.hasError == false) {
            this.dataList = [...res.data.data]
            this.total = res.data.total;
          }
        })
    },
    // 导出表格
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../../components/common/Export2Excel");

        const tHeader = ["类型","门禁点", "时间", "通行总量", "证件通行量", "票通行量"];// 上面设置Excel的表格第一行的标题
      
        const filterVal = ["typeName","door","time", "number", "document","ticket"]; // 上面的index、nickName、name是tableData里对象的属性
        
        const list = this.dataList;              //把data里的tableData存到list

        const data = this.formatJson(filterVal, list);
        
        export_json_to_excel(tHeader, data, "通行统计_"+new Date().getTime());   //标题，数据，文件名
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
  }};
</script>

<style lang="scss">
input{
  text-align: center;
}
  .el-main{
    border-radius: 5px;
    position: relative;
  }
.table-wrap {
  height: 100%;
  margin-left: 10px;
}
</style>